<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="html/Style/skin.css" />
    <script type="text/javascript" src="html/Js/jquery-1.9.1.min.js"></script>
    
    <script type="text/javascript">
     var result=false;
    	function checkNumber(){
    		var name=document.getElementById("number").value;
    		var span=document.getElementById("numberMsg");
    		if(name){
				var regex=/^[A-Za-z0-9]{4,12}$/;
				if(name.match(regex)){
					
					
					/* 获取异步请求 */
					$.ajax({
						url:"emp.do?method=checkEmpNumber",
						type:"post",
						data:"number="+name,
						dataType:'json',
						success:function(d){
							if(d){
								$("#numberMsg").html("<img src='html/Images/true.jpg'/>");
								result=true;
							}else{
								$("#numberMsg").html("<img src='html/Images/false.jpg'/><font color='red'>员工编号已存在</font>");
							}
						}
					
					});
				}else{
					span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>员工编号格式不正确，由数字 、字母组成，长度4-12</font>";
				}
			}else{
				span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>必填</font>";
			}
    		}
    		
    		function checkName(){
    		var name=document.getElementById("name").value;
    		var span=document.getElementById("nameMsg");
    		if(name){
				var regex=/^[\u4e00-\u9fa5]{2,4}$/;
				if(name.match(regex)){
					span.innerHTML="<img src='html/Images/true.jpg'/>";
					return true;
				}else{
					span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>员工姓名格式不正确</font>";
				}
			}else{
				span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>必填</font>";
			}
			return false;
    		}
    		
    		function checkPhone(){
    		var name=document.getElementById("phone").value;
    		var span=document.getElementById("phoneMsg");
    		if(name){
				var regex=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				if(name.match(regex)){
					span.innerHTML="<img src='html/Images/true.jpg'/>";
					return true;
				}else{
					span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>请输入正确的手机号码</font>";
				}
			}else{
				span.innerHTML="<img src='html/Images/false.jpg'/><font color='red'>必填</font>";
			}
			return false;
    		}
    		
    	$(function(){
    		$("#btn").click(function(){
    			if(result&&checkName()&&checkPhone()){
    				
    				$("#form").attr("action","emp.do?method=addEmp").submit();
    			}else{
    				alert("请正确填写信息");
    			}
    		});
    	});
    </script>
</head>
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!-- 头部开始 -->
            <tr>
                <td width="17" valign="top" background="html/Images/mail_left_bg.gif">
                    <img src="html/Images/left_top_right.gif" width="17" height="29" />
                </td>
                <td valign="top" background="html/Images/content_bg.gif">
                    <table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" background="./html/Images/content_bg.gif">
                        <tr><td height="31"><div class="title">员工添加</div></td></tr>
                    </table>
                </td>
                <td width="16" valign="top" background="html/Images/mail_right_bg.gif"><img src="html/Images/nav_right_bg.gif" width="16" height="29" /></td>
            </tr>
            <!-- 中间部分开始 -->
            <tr>
                <!--第一行左边框-->
                <td valign="middle" background="html/Images/mail_left_bg.gif">&nbsp;</td>
                <!--第一行中间内容-->
                <td valign="top" bgcolor="#F7F8F9">
                    <table width="100%" border="0"  align="center" cellpadding="0" cellspacing="0">
                        <!-- 空白行-->
                        <tr><td colspan="2" valign="top">&nbsp;</td><td>&nbsp;</td><td valign="top">&nbsp;</td></tr>
                        <tr>
                            <td colspan="4">
                               
                            </td>
                        </tr>
                        <!-- 一条线 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 员工添加开始 -->
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="96%">
                                <table width="100%">
                                    <tr>
                                        <td colspan="2">
                                            <form id="form" action="" method="post">
                                                <table width="100%"class="cont">
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td width="8%"><font color="red"><b>*</b></font>员工编码：</td>
                                                        <td width="25%" >
                                                        	<input  class="text" type="text" onblur="checkNumber()" id="number" name="number" placeholder="长度限制，非空，唯一不重复" />
                                                        	<span id="numberMsg"></span>
                                                        </td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td><font color="red"><b>*</b></font>员工姓名：</td>
                                                        <td width="20%">
                                                        	<input class="text" type="text" id="name" name="name" onblur="checkName()" placeholder="真实姓名" />
                                                        	<span id="nameMsg"></span>
                                                        </td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
													<tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td><font color="red"><b>*</b></font>性&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
                                                        <td width="20%">
															<input type="radio" id="sex" name="sex" value="1" checked="checked"/>男&nbsp;&nbsp;
															<input type="radio" id="sex" name="sex" value="2"/>女
														</td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
													<tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td><font color="red"><b>*</b></font>联系方式：</td>
                                                        <td width="20%">
                                                        	<input class="text" id="phone" name="phone" onblur="checkPhone()" placeholder="正则校验手机号码" />
                                                        	<span id="phoneMsg"></span>
                                                        </td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td><font color="red"><b>*</b></font>账号状态：</td>
                                                        <td >
                                                        	<select name="state" id="state" style="width:50px">
                                                            	<option style="width:30px" value="2">禁用</option>
                                                                <option style="width:30px" value="1">启用</option>
                                                            </select>
                                                        </td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td width="2%">&nbsp;</td>
                                                        <td>所属部门：</td>
                                                        <td >
                                                        	<select id="deptId" name="dept.id">
																<option value="0">不限</option>
																<c:forEach items="${depts}" var="dept" >
																<option value="${dept.id }">${dept.shortName }</option>
																</c:forEach>
															</select>
                                                        </td>
                                                        <td></td>
                                                        <td width="2%">&nbsp;</td>
                                                    </tr>
													
													
													
													
                                                    <tr>
                                                        <td>&nbsp;</td>
                                                        <td>备注信息：</td>
                                                        <td><textarea id="remark" name="remark"></textarea></td>
                                                        <td></td>
                                                        <td>&nbsp;</td>
                                                    </tr>
                                                    <tr>
                                                        <td>&nbsp;</td>
                                                        <td colspan="2" align="center">
															<input id="btn" class="btn"  type="button"  value="提交" />&nbsp;&nbsp;&nbsp;
															<input class="btn" onclick="history.back()" type="button" value="返回" />
														</td>
                                                        <td></td>
                                                        <td>&nbsp;</td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="2%">&nbsp;</td>
                        </tr>
                        <!-- 员工添加结束 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="51%" class="left_txt">
                                
                            </td>
                            <td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    </table>
                </td>


                <td background="html/Images/mail_right_bg.gif">&nbsp;</td>
            </tr>
            <!-- 底部部分 -->
            <tr>
                <td valign="bottom" background="html/Images/mail_left_bg.gif">
                    <img src="html/Images/buttom_left.gif" width="17" height="17" />
                </td>
                <td background="html/Images/buttom_bgs.gif">
                    <img src="html/Images/buttom_bgs.gif" width="17" height="17">
                </td>
                <td valign="bottom" background="html/Images/mail_right_bg.gif">
                    <img src="html/Images/buttom_right.gif" width="16" height="17" />
                </td>           
            </tr>
        </table>
    </body>
</html>